<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <title>云社区-优质资源交换网站</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link th:href="@{css/bootstrap.min.css}" rel="stylesheet">
    <link rel="shortcut icon" href="favicon.ico">
    <script th:src="@{js/jquery.min.js}"></script>
    <script th:src="@{js/bootstrap.min.js}"></script>
    <script th:src="@{js/clipboard.js}"></script>
    <script th:src="@{js/jquery.cookie.js}"></script>
</head>
<body style="padding-top: 70px;">
<div class="container">
    <div class="row">
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1"
                            aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/">YQfeng</a>
                </div>

                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav visible-lg-block">
                        <p class="navbar-text"> 一群只想敲代码的咸鱼</p>
                    </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li sec:authorize="authenticated"><a href="#">余额:<span id="money_data" th:text="${money}+'金币'" th:fragment="money_data"></span></a></li>
                        <li sec:authorize="authenticated">
                            <button type="button" class="btn btn-info navbar-btn" data-toggle="modal"
                                    data-target="#submitzy">提交资源
                            </button>
                        </li>
                        <li sec:authorize="!hasRole('ADMIN') && authenticated"><a th:href="@{/user/index}">个人中心</a></li>
                        <li sec:authorize="hasRole('ADMIN')"><a th:href="@{/admin/index}">管理员系统</a></li>
                        <li sec:authorize="!authenticated">
                            <button type="button" class="btn btn-primary navbar-btn" data-toggle="modal"
                                    data-target="#exampleModal">登陆
                            </button>
                        </li>
                        <li sec:authorize="authenticated"><a th:href="@{/logout}">退出</a></li>
                    </ul>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>

    </div>
    <!--模态框开始-->
    <!--登陆-->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">登陆</h4>
                </div>
                <div class="modal-body">
                    <form method="post" role="form" id="loginForm">
                        <div class="form-group">
                            <label for="username">UserName</label>
                            <input type="text" class="form-control" id="username" name="username"
                                   placeholder="UserName">
                        </div>
                        <div class="form-group">
                            <label for="password">Password</label>
                            <input type="password" class="form-control" id="password" name="password"
                                   placeholder="Password">
                        </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" name="remember-me">Remember-Me
                            </label>
                        </div>
                        <a href="" data-toggle="modal" data-dismiss="modal" data-target="#register">还没有账号？点我注册</a>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" onclick="tijiao()">Login</button>
                </div>
            </div>
        </div>
    </div>
    <!--注册-->
    <div id="register" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-title">
                    <h1 class="text-center">注册</h1>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="name">UserName</label>
                            <input type="text" class="form-control" id="name" name="name" placeholder="UserName">
                        </div>
                        <div class="form-group">
                            <label for="password2">Password</label>
                            <input type="password" class="form-control" id="password2" name="password"
                                   placeholder="Password">
                        </div>
                        <div class="form-group">
                            <label for="email">Your Email</label>
                            <input type="email" class="form-control" id="email" name="email" placeholder="Email">
                        </div>
                        <div class="form-group">
                            <label for="code">Code</label>
                            <input type="text" class="form-control" id="code" placeholder="Code">
                        </div>
                        <button type="button" id="getCode" onclick="getMa()" class="btn btn-info">Get Code</button>
                    </form>
                    <a href="" data-toggle="modal" data-dismiss="modal" data-target="#exampleModal">已有账号？点我登录</a>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" onclick="checkCode()">Register</button>
                </div>
            </div>
        </div>
    </div>
    <!--提交资源-->
    <div id="submitzy" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-title">
                    <h1 class="text-center">提交资源</h1>
                </div>
                <div class="modal-body">
                    <form id="zysubmit">
                        <div class="form-group">
                            <label for="zyname">资源名称</label>
                            <input type="text" class="form-control" id="zyname" name="zyname" placeholder="资源名称">
                        </div>
                        <div class="form-group">
                            <label for="url">资源链接</label>
                            <input type="text" class="form-control" id="url" name="zyurl"
                                   placeholder="资源链接">
                        </div>
                        <div class="form-group">
                            <label for="zypassword">资源密码</label>
                            <input type="text" class="form-control" id="zypassword" name="zypassword" placeholder="资源密码">
                        </div>
                        <div class="form-group">
                            <label for="zypassword">资源类型</label>:&nbsp;&nbsp;
                            <input type="radio" name="type" value="1" checked>视频资源
                            <input type="radio" name="type" value="2">图书资源
                            <input type="radio" name="type" value="0">其他资源
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" onclick="submitzy()">提交</button>
                </div>
            </div>
        </div>
    </div>
    <!--帮助文档-->
    <div id="helpDoc" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-title">
                    <h1 class="text-center">帮助!必看!</h1>
                </div>
                <div class="modal-body">
                    <h3 class="text-info">这里是一个优质资源交换网站,你可以通过资源换资源的方式获取优质资源.<br><br>
                        资源区的资料每条收取100金币(无需重复购买),刚开始注册的新用户会获得300金币的赠送.<br><br>
                        如果觉得不够,你可以登陆以后点击导航栏的提交资源输入相关信息提交资源.<br><br>
                        资源通过你可以获得300金币的奖励(会有邮件通知的哦).<br><br>
                        <br>
                        本网站资源搜集自网络,仅供学习.下载后请在二十四小时内删除!!!!
                    </h3>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" onclick="setHelp()">不在提示</button>
                </div>
            </div>
        </div>
    </div>
    <!--模态框结束-->
    <div class="row">
        <div class="col-xs-12 col-md-9">
            <!-- <div class="jumbotron" style="background: url(./image/b1.jpg);height: 450px;">
                <h1>Hello, Word!</h1>
                <p>一行代码改变世界</p>
            </div> autoplay="autoplay" -->
            <!--<video src="image/sp.mp4" controls="controls" width="100%" autoplay="autoplay" id="video"-->
                   <!--loop="loop"></video>-->
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                <!-- Indicators -->
                <ol class="carousel-indicators">
                    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                </ol>

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                    <div class="item active">
                        <img src="image/img.jpg" alt="主图">

                    </div>
                    <div class="item">
                        <img src="image/img2.jpg" alt="次图">

                    </div>

                </div>

                <!-- Controls -->
                <!--<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">-->
                    <!--<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>-->
                    <!--<span class="sr-only">Previous</span>-->
                <!--</a>-->
                <!--<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">-->
                    <!--<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>-->
                    <!--<span class="sr-only">Next</span>-->
                <!--</a>-->
            </div>
        </div>
        <div class="col-xs-12 col-md-3" style="text-align: center">
            <h3 class="text-center">资源下载排行榜
                <small>每分钟更新</small>
            </h3>
            <table class="table">
                <tr>
                    <th width="15%">
                        排名
                    </th>
                    <th>
                        名称
                    </th>
                    <th width="20%">
                        点击次数
                    </th>
                </tr>
                <tr th:each="wap,status:${phb}">
                    <td th:text="${status.index + 1}"></td>
                    <td th:text="${wap.name}"></td>
                    <td th:text="${wap.count}"></td>
                </tr>
            </table>
        </div>
    </div>
    <div class="page-header">
        <h1 class="text-center" id="zyq">资源区
            <small>建设中......</small>
        </h1>
    </div>
    <!--<h1 sec:authorize="!authenticated" class="text-center">登陆可查看资源区<a href="#" data-toggle="modal" data-target="#exampleModal">点我登陆</a></h1>-->
    <div  class="row">
        <div class="col-md-2">
            <div class="list-group">
                <button id="spzy" type="button" class="list-group-item active" onclick="findByType()">视频资源</button>
                <button id="tszy" type="button" class="list-group-item" onclick="findByType2()">图书资源</button>
                <button id="otzy"type="button" class="list-group-item" onclick="findByType3()">其他资源</button>
            </div>
        </div>
        <div class="col-md-10" style="padding-right: 30px;">
            <div class="row" align="left">
                <div class="col-md-4" style="padding-left: 0px;">
                    <input class="form-control" id="key" placeholder="搜索" onkeyup="updateKey()">
                    <br/>
                </div>
            </div>
            <div class="row" id="dataList" th:fragment="table_refresh">
                <table class="table table-bordered">
                    <tbody>
                    <tr>
                        <th width="70%">资源名称</th>
                        <th width="20%" class="text-center">上传者</th>
                        <th class="text-center">操作</th>
                    </tr>
                    <tr th:each="zy:${waps}">
                        <td>
                            <div class="row">
                                <div class="col-md-8 col-xs-8">
                                    <p th:text="${zy.name}" style="margin:10px 0px;"></p>
                                </div>
                                <div class="col-md-4 text-right">
                                    <th:block>
                                        <h4><span th:if="${zy.id==1}"
                                                  class='label label-info text-right big'>极力推荐</span></h4>
                                    </th:block>
                                </div>
                            </div>
                        </td>
                        <td>
                            <div class="row">
                                <div class="col-md-12 col-xs-12 text-center">
                                    <p th:text="${zy.upload}" style="margin:10px 0px;" ></p>
                                </div>
                            </div>
                        </td>
                        <td align="center">
                            <button class="btn btn-info" th:id="${'a'+zy.id}" th:data-clipboard-text="${zy.password}"
                                    th:onclick="goWap([[${zy.www}]],[[${zy.id}]])">前往
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div align="right">
                    <nav aria-label="Page navigation">
                        <ul class="pagination">
                            <li th:if="${pageInfo.isFirstPage eq true}" class="disabled">
                                <a aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li th:if="${pageInfo.isFirstPage != true}">
                                <a th:onclick="updatepervious([[${pageInfo.prePage}]])" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li>
                            <li th:if="${pageInfo.pages<=5&&pageInfo.pages!=0}" th:each="i:${#numbers.sequence(1,pageInfo.pages)}"
                                th:class="${i eq pageInfo.pageNum}?'active':''"><a th:onclick="next([[${i}]])"
                                                                                   th:text="${i}"></a></li>
                            <li th:if="${(pageInfo.pages>5) and (pageInfo.pageNum>=(pageInfo.pages - 4))}"
                                th:each="i:${#numbers.sequence(pageInfo.pages - 4,pageInfo.pages)}"
                                th:class="${i eq pageInfo.pageNum}?'active':''"><a th:onclick="next([[${i}]])"
                                                                                   th:text="${i}"></a></li>
                            <li th:if="${(pageInfo.pages>5) and (pageInfo.pageNum<(pageInfo.pages - 4))}"
                                th:each="i:${#numbers.sequence(pageInfo.pageNum,(pageInfo.pageNum + 4) > pageInfo.pages ? pageInfo.pages : (pageInfo.pageNum + 4))}"
                                th:class="${i eq pageInfo.pageNum}?'active':''"><a th:onclick="next([[${i}]])"
                                                                                   th:text="${i}"></a></li>
                            <li th:if="${pageInfo.isLastPage != true}">
                                <a th:onclick="updatenext([[${pageInfo.nextPage}]])" aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                            <li th:if="${pageInfo.isLastPage eq true}" class="disabled">
                                <a aria-label="Next">
                                    <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
<script>
    var code = "";
    var findType=1;

    $(document).ready(function(){
        // 加载完成事件
        var helpType = $.cookie("helpClose");
        if (helpType!=1){
            $("#helpDoc").modal("show");
        }
    });
    function goWap(w, c) {
        var clipboard = new ClipboardJS('#a' + c);
        clipboard.on('success', function () {
            $.ajax({
                url:"checkUser",
                success:function () {
                    $.ajax({
                        url: "add?id=" + c,
                        success: function () {
                            $.ajax({
                                url: "updateMoney",
                                type:"post",
                                success:function (data) {
                                    $("#money_data").html(data);
                                }
                            });
                            alert("复制成功,前往下载界面");
                            window.open('http://' + w, '_blank');
                        },
                        error:function () {
                            alert("金币不足!!!")
                        }
                    });
                },
                error:function () {
                    alert("请先登陆!!");
                    $("#exampleModal").modal("show");
                }

            });

        });

    }

    function updatenext(i) {
        var key = $("#key").val();
        $.ajax({
            url: "/findAllByAjax?pages=" + i + "&key=" + key  +"&type="+findType,
            type: 'post',
            success: function (data) {
                $('#dataList').html(data);
                $("#dataList").css("margin-right",0).css("margin-left",0)
            }
        })
    }

    function updatepervious(i) {
        var key = $("#key").val();
        $.ajax({
            url: "/findAllByAjax?pages=" + i + "&key=" + key  +"&type="+findType,
            type: 'post',
            success: function (data) {
                $('#dataList').html(data);
                $("#dataList").css("margin-right",0).css("margin-left",0)
            }
        })
    }

    function next(i) {
        var key = $("#key").val();
        $.ajax({
            url: "/findAllByAjax?pages=" + i + "&key=" + key +"&type="+findType,
            type: 'post',
            success: function (data) {
                $('#dataList').html(data);
                $("#dataList").css("margin-right",0).css("margin-left",0)
            }
        })
    }

    function updateKey() {
        var key = $("#key").val();
        var url = "/findAllByAjax?pages=1&key=" + key +"&type="+findType;
        $.ajax({
            url: url,
            type: 'post',
            success: function (data) {
                $('#dataList').html(data);
                $("#dataList").css("margin-right",0).css("margin-left",0)
            }
        })
    }

    function tijiao() {
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: "/loginUser",//url
            data: $('#loginForm').serialize(),
            success: function (data) {
                if (data["message"] === "yes") {
                    window.location.href = "/";
                } else {
                    alert(data["message"]);
                }

            }
        });//表单提交
    }
    function submitzy() {
        $.ajax({
            //几个参数需要注意一下
            type: "POST",//方法类型
            url: "/addzy",//url
            data: $('#zysubmit').serialize(),
            success: function () {
                alert("提交成功");
                $("#submitzy").modal("hide");
            }
        });//表单提交
    }

    function getMa() {
        var email = $("#email").val();
        var reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
        if (email === "") { //输入不能为空
            alert("输入不能为空!");
        } else if (!reg.test(email)) { //正则验证不通过，格式不对
            alert("邮箱格式错误");

        } else {
            $("#getCode").attr("disabled", "disabled ");
            $.ajax({
                url: "/sendEmail",
                type: "post",
                data: {"email": email},
                dataType: "json",
                success: function (data) {
                    alert("发送成功!请注意查收!!");
                    code = data["code"];
                }
            })
        }
    }

    function checkCode() {
        var c_code = $("#code").val();
        var name = $("#name").val();
        var email = $("#email").val();
        var password = $("#password2").val();
        if (c_code === "") {
            alert("验证码不能为空!");
        } else if (c_code != code) {
            alert("验证码错误!!!!");
        } else {
            if (name != "" && password != "") {
                $.ajax({
                    url: "/register",
                    type: "post",
                    data: {"name": name, "password": password, "email": email},
                    success: function (data) {
                        alert("注册成功^_^");
                        $("#register").modal("hide");
                        $("#exampleModal").modal("show");
                    },
                    error: function (data) {
                        alert("用户已存在!忘记密码联系管理员!");
                        $("#name").val("")
                    }
                })
            } else {
                alert("用户名或密码为空");
            }
        }
    }
    function findByType() {
        findType=1;
        $("#otzy").removeClass("active");
        $("#tszy").removeClass("active");
        $("#spzy").addClass("active");
        var url = "/findAllByAjax?type="+findType;
        $.ajax({
            url: url,
            type: 'post',
            success: function (data) {
                $('#dataList').html(data);
                $("#dataList").css("margin-right",0).css("margin-left",0)
            }
        })
    }
    function findByType2() {
        findType=2;
        $("#otzy").removeClass("active");
        $("#tszy").addClass("active");
        $("#spzy").removeClass("active");
        var url = "/findAllByAjax?type="+findType;
        $.ajax({
            url: url,
            type: 'post',
            success: function (data) {
                $('#dataList').html(data);
                $("#dataList").css("margin-right",0).css("margin-left",0)
            }
        })
    }
    function findByType3() {
        findType=0;
        $("#otzy").addClass("active");
        $("#tszy").removeClass("active");
        $("#spzy").removeClass("active");
        var url = "/findAllByAjax?type="+findType;
        $.ajax({
            url: url,
            type: 'post',
            success: function (data) {
                $('#dataList').html(data);
                $("#dataList").css("margin-right",0).css("margin-left",0)
            }
        })
    }
    function setHelp() {
        $.cookie("helpClose","1");
        $("#helpDoc").modal("hide");
    }
</script>
</html>
